import React, { Component } from 'react';
import {
  View,
  Text,
  TextInput,
  Button,
  StyleSheet,
  ScrollView,
  Image,
  TouchableOpacity,
  ImageBackground,
  ToastAndroid,
  DeviceEventEmitter,
} from 'react-native';
import * as ImagePicker from 'react-native-image-picker';
import Icon from 'react-native-vector-icons/AntDesign';
import Loading from '../../compenent/Loading';
import {DOMAIN_URL, addEvent, eventUpdate, uploadFile, honorDetail, honorReview} from '../../../util/api';
import { DateTimePickerAndroid } from '@react-native-community/datetimepicker';
import moment, { months } from 'moment';
import { PAGENAME } from '../../../util/PageName';
import { style } from '../../../theme';
import DeleteIcon from "../../compenent/DeleteIcon";
import AsyncStorage from "@react-native-async-storage/async-storage";

class HonorDetailScreen extends Component {



  constructor(props) {
    super(props);
    this.state = {
      honorid: props.route.params.honorid,
      isAdmin: false,
      name: '',
      description: '',
      score: '',
      images: [],
      preImages: [],
      approvalStatus: '',
      // 'descriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescription',
      // score: '2',
      // images: [],
      // endTime: new Date(),
      loading: false,
    };

    AsyncStorage.getItem('isAdmin').then(value => {
      console.log('this.state.isAdmin', value);
      this.setState({
        isAdmin: value == 'true' ? true : false,
      });
    });
  };



  componentDidMount() {
    this.subscription = this.props.navigation.addListener('focus', () => {
      // do something
      console.log('event detail');
      this.loadDataDetail()
    });
  }

  private loadDataDetail() {
    honorDetail(this.state.honorid).then(res => {
      console.log(1111111111111111)
      const data = res.data;
      this.setState({
        name: data.honorTitle,
        description: data.honorcontent,
        score: data.honorscore,
        preImages: data.attachmentsDetail,
        approvalStatus: data.approvalStatus
      })
    })

  }

  componentWillUnmount() {
    this.subscription();
  }
  private reviewApply(status) {
    const data = {
      ids: this.state.honorid,
      status: status
    }

    honorReview(data).then(res => {
      this.setState({
        loading: false
      })
      if (res.code == 0) {
        ToastAndroid.show('审批成功', 2000);
        this.props.navigation.goBack();
      } else {
        ToastAndroid.show('审批失败', 2000);
      }
    });
  }

  pickImage = () => {
    ImagePicker.launchImageLibrary(
        { mediaType: 'photo', selectionLimit: 5 },
        response => {
          if (!response.didCancel) {
            this.setState(prevState => ({
              images: [
                ...new Set([
                  ...prevState.images,
                  ...(response.assets.map(asset => asset) || []),
                ]),
              ],
            }));
          }
        },
    );
  };

  inputEndTime = (event, value) => {
    this.setState({ endTime: value });
  };

  render() {
    const { name, description, score, images, preImages, approvalStatus  } = this.state;

    console.log('approvalStatus is ' + approvalStatus);
    return (
        // <ImageBackground
        //   source={require('../../../assets/images/bg.jpg')} // 替换为您自己的背景图路径
        //   style={{flex: 1}}
        //   imageStyle={{opacity: 0.4}} // 修改透明度，范围为0（完全透明）到1（完全不透明）
        // >
        <View>
          <Loading loading={this.state.loading} />
          <ScrollView contentContainerStyle={styles.container}>
            <Text style={style.subTitle}>标题</Text>
            <TextInput editable={false}
                       style={styles.input}
                       value={name}
                       onChangeText={text => this.setState({ name: text })}
            />
            <Text style={style.subTitle}>分数</Text>
            <TextInput editable={false}
                       style={styles.input}
                       value={score + ''}
                       onChangeText={text => this.setState({ score: text })}
            />

            <Text style={style.subTitle}>描述内容</Text>
            <TextInput editable={false}
                       style={[styles.input]}
                       value={description}
                       onChangeText={text => this.setState({ description: text })}
                       multiline
            />

            {preImages && preImages.length > 0 && (
                <View style={{ flexDirection: 'row' }}>
                  <Text style={style.subTitle}>图片</Text>
                </View>
            )}

            {preImages && preImages.length > 0 && (
                <View style={{ flexDirection: 'row', flexWrap: 'wrap' }}>
                  {preImages?.map((image, index) => (
                      <View key={index} style={{ position: 'relative', margin: 4 }}>
                        <Image source={{ uri: `${DOMAIN_URL}${image.path}` }} style={styles.image} />
                        <TouchableOpacity
                            style={{
                              position: 'absolute',
                              top: 2,
                              right: 2,
                              width: 30,
                              height: 30,
                              justifyContent: 'center',
                              alignItems: 'center',
                            }}
                            onPress={() => {
                              const updatedImages = images.filter(
                                  (value, idx) => idx !== index,
                              );
                              this.setState({ images: updatedImages });
                            }}>
                        </TouchableOpacity>
                      </View>

                  ))}

                </View>
            )}

            {approvalStatus === '1' && (
                <View
                    style={{
                      flexDirection: 'row',
                      alignSelf: 'center',
                      marginVertical: 15,
                    }}>
                  {this.state.isAdmin && (
                      <View style={style.pageButton}>
                        <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
                          <Button title="审批通过" onPress={() => this.reviewApply('0')} />
                          <Button title="不通过" onPress={() => this.reviewApply('2')} />
                        </View>
                      </View>
                  )}
                </View>
            )}

            {approvalStatus !== '1' && (
            <View>
              <Button
                  disabled={true}
                  title={
                    approvalStatus === '0'
                        ? '已通过'
                        : approvalStatus ===
                        '2'
                            ? '未通过'
                            : '其他'
                  }
              />
            </View>
            )}



          </ScrollView>

        </View>



    );
  }


}

const styles = StyleSheet.create({
  container: {
    padding: 20,
  },
  label: {
    fontSize: 16,
    marginBottom: 5,
    fontWeight: 'bold',
  },
  input: {
    borderWidth: 1,
    borderColor: 'gray',
    borderRadius: 5,
    marginBottom: 10,
    padding: 10,
  },
  button: {
    fontSize: 16,
    color: 'blue',
    marginBottom: 10,
  },
  image: {
    width: 75,
    height: 75,
    marginBottom: 10,
  },
});

export default HonorDetailScreen;
